<!-- 1 脚本 -->
<script lang='ts' setup name='NavMenu'>
import { ref, reactive } from 'vue';


let menus = [
    {
        title: '系统管理', path: '/system',
        children: [
            { title: '用户管理', path: '/system/user' },
            { title: '角色管理', path: '/system/role' }
        ]
    },
    {
        title: '系统监控', path: '/monitor',
        children: [
            { title: '在线用户', path: '/system/online' },
        ]
    },
    
   


]


</script>


<!-- 2 模板 -->
<template>



    <!-- <el-menu active-text-color="#ffd04b" background-color="#304156" class="el-menu-vertical-demo" router
        default-active="2" text-color="#fff">
        <el-sub-menu index="1">
            <template #title>
                <span>系统管理</span>
            </template>

            <el-menu-item index="/system/user">用户管理</el-menu-item>
            <el-menu-item index="/system/todo">TodoList</el-menu-item>
            <el-menu-item index="/system/role">角色管理</el-menu-item>

        </el-sub-menu>



        <el-sub-menu index="2">
            <template #title>
                <span>系统监控</span>
            </template>

            <el-menu-item index="/monitor/online">在线用户</el-menu-item>
            <el-menu-item index="2-2">系统任务</el-menu-item>

        </el-sub-menu>

        <el-sub-menu index="/pinia">
            <template #title>
                <span>Pinia框架</span>
            </template>

            <el-menu-item index="/pinia/usePinia">使用Pinia</el-menu-item>
            <el-menu-item index="/pinia/usePiniaNew">使用Pinia组合式</el-menu-item>


        </el-sub-menu>

    </el-menu> -->






  <el-menu active-text-color="#ffd04b" background-color="#304156" class="el-menu-vertical-demo" router
       unique-opened
        default-active="2" text-color="#fff">
        
        
        
        <el-sub-menu :index=" menu.path" v-for="menu in menus">
            <template #title>
                <span>{{ menu.title }}</span>
            </template>

            <el-menu-item   v-for="childMenu in menu.children"  :index="childMenu.path">{{ childMenu.title }}</el-menu-item>
           

        </el-sub-menu>



    </el-menu>

</template>


<!-- 3 样式 -->
<style scoped>
.active {
    color: orange;
}
</style>